<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="王建春">
    <title>下拉菜单</title>
    <style>
        body{
            margin: 0;
            background-color: wheat;
        }
        #outer{
            width: 924px;
            height: 80px;
            margin: 50px auto;
            text-align: center;
            position: relative;
        }
        #up{
            width: 924px;
            height: 36px;
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #up li{
            width: 108px;
            height: 36px;
            float: left;
            line-height: 36px;
            background-image: url(img/nav_bg.png);
            background-position: 0 -108px;
            color: white;
            font-size: 14px
        }
       #up li:nth-child(1){
            width: 30px;
            height: 36px;
            background-image: url(img/nav_bg.png);
            background-position: 0 -36px
        }
        #up li:nth-child(10){
            width: 30px;
            height: 36px;
            background-image: url(img/nav_bg.png);
            background-position: -78px -72px
        }
        ol{
            width: 420px;
            height: 30px;
            padding: 0;
            margin: 0;
            list-style: none;
            position: absolute;
            top: 40px;
            left: 138px;
            background-image: url(img/nav_bg.png);
            background-size: 108px 288px;
            background-repeat: no-repeat;
            background-position: 54px -261px;
            display: none;
        }
        ol li{
            width: 80px;
            height: 26px;
            margin-top: 4px;
            box-sizing: border-box;
            float: left;
            background-image: url(img/nav_bg.png);
            background-position: 0 -208px;
            font-size: 12px;
            /*border-right: 1px solid rebeccapurple;*/
        }
        ol li::before{
            content: '| '
        }
       ol li span{
           display: inline-block;
            width: 60px;
            height: 20px;
            margin: 3px auto;
            line-height: 20px;
            
            
        }
       ol li:nth-child(1){
            width: 10px;
            height: 26px;
            background-image: url(img/nav_bg.png);
            background-position: 0 -181px;
            /*border-right:0;*/
        }
        ol li:nth-child(1)::before{
            content: none;
        }
        ol li:nth-child(2)::before{
            content: none;
        }
        ol li:nth-child(7)::before{
            content: none;
        }
        
        ol li:nth-child(7){
            width: 10px;
            height: 28px;
            background-image: url(img/nav_bg.png);
            background-position: -98px -235px;
            /*border-right:0*/
        }
        #er{
            position: absolute;
            top: 40px;
            left: 246px; 
        }
        #san{
            position: absolute;
            top: 40px;
            left: 354px; 
        }
        #si{
            position: absolute;
            top: 40px;
            left: 354px; 
            background-position: 162px -261px;
        }
        #wu{
            position: absolute;
            top: 40px;
            left: 504px; 
            background-position: 115px -261px;
        }
        #liu{
            position: absolute;
            top: 40px;
            left: 504px; 
            background-position: 223px -261px;
        }
        #qi{
            position: absolute;
            top: 40px;
            left: 504px; 
            background-position: 331px -261px;
        }
    </style>
</head>
<body>
    <div id="outer">
        <ul id="up">
            <li></li>
            <li>站长之家</li>
            <li>行业资讯</li>
            <li>站长在线</li>
            <li>网站运营</li>
            <li>设计在线</li>
            <li>网络编程</li>
            <li>联盟资讯</li>
            <li>服务器</li>
            <li></li>
        </ul>
        <ol id=down>
            <li></li>
            <li><span>html</span></li>
            <li><span>css</span></li>
            <li><span>JavaScript</span></li>
            <li><span>Ajax</span></li>
            <li><span>jQuery</span></li>
            <li></li>
        </ol>
        <ol id=er>
            <li></li>
            <li><span>html</span></li>
            <li><span>css</span></li>
            <li><span>JavaScript</span></li>
            <li><span>Ajax</span></li>
            <li><span>jQuery</span></li>
            <li></li>
        </ol>
        <ol id=san>
            <li></li>
            <li><span>html</span></li>
            <li><span>css</span></li>
            <li><span>JavaScript</span></li>
            <li><span>Ajax</span></li>
            <li><span>jQuery</span></li>
            <li></li>
        </ol>
        <ol id=si>
            <li></li>
            <li><span>html</span></li>
            <li><span>css</span></li>
            <li><span>JavaScript</span></li>
            <li><span>Ajax</span></li>
            <li><span>jQuery</span></li>
            <li></li>
        </ol>
        <ol id=wu>
            <li></li>
            <li><span>html</span></li>
            <li><span>css</span></li>
            <li><span>JavaScript</span></li>
            <li><span>Ajax</span></li>
            <li><span>jQuery</span></li>
            <li></li>
        </ol>
        <ol id=liu>
            <li></li>
            <li><span>html</span></li>
            <li><span>css</span></li>
            <li><span>JavaScript</span></li>
            <li><span>Ajax</span></li>
            <li><span>jQuery</span></li>
            <li></li>
        </ol>
        <ol id=qi>
            <li></li>
            <li><span>html</span></li>
            <li><span>css</span></li>
            <li><span>JavaScript</span></li>
            <li><span>Ajax</span></li>
            <li><span>jQuery</span></li>
            <li></li>
        </ol>
    </div>
</body>
<html>
<script>
    

    var ups=document.querySelectorAll('#up li')
    var ols=document.querySelectorAll('#outer ol')
    var Lis=document.querySelectorAll('ol li')
    var spans=document.querySelectorAll('ol li span')

    console.log(ols)
    
    
    for(var i=1;i<ups.length;i++){
        ups[i].index=i
        ups[i].onmouseover=function(){         

        ups[this.index].style.backgroundPosition='0 -144px'
        ols[this.index-2].style.display='block'
        }
        ups[i].onmouseout=function(){         
        ups[this.index].style.backgroundPosition='0 -108px'      
        }
    
        
    }
    for(var i=0;i<spans.length;i++){
        spans[i].index=i
        spans[i].onmouseover=function(){
            spans[this.index].style.borderBottom= "1px solid blue";
        }
        spans[i].onmouseout=function(){
            spans[this.index].style.borderBottom= '';
            
        }
    }
    for(var i=0;i<ols.length;i++){
        ols[i].index=i
        ols[i].onmouseleave=function(){
            ols[this.index].style.display='none';
            
        }
    }

    



</script>